<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>code</title>
  <style>
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 12px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 15px;
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      -webkit-box-shadow: inset 0 0 5px #dcdfe6;
      box-shadow: inset 0 0 3px #dcdfe6;
      background: #dcdfe6;
    }

    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ffffff;
    }

    .cantanier {
      padding: 20px;
    }
    th,td{
        padding: 10px 15px;
    }
  </style>
</head>

<body>
  <div>
    <div class="handle-wrap">
      <h4>验证码</h4>
      <button type="button" id="clear-btn" class="btn btn-primary">
        清空
      </button>
    </div>
    <div class="cantanier">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">验证码</th>
            <th scope="col">时间</th>
          </tr>
        </thead>
        <tbody>
          <% for (var i=0; i < list.length; i++) {%>
            <tr style="clear: both">
              <th scope="row"><%- i %></th>
              <td><%- list[i].code %></td>
              <td><%- list[i].created_at %></td>
            </tr>
            <% } %>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    var clearBtn = document.getElementById('clear-btn')
    clearBtn.onclick = function () {
      fetch('/components/code/clearAll', {
        method: 'post',
        // body: {},
        headers: {
          'Content-Type': 'application/json',
        },
      }).then(function (data) {
        window.location.href = '/tools/code';
      });
    }
  </script>
</body>

</html>